<template>
  <view class="container screen-width">
    <view class="count-box flex items-middle space-between margin-bottom">
      <view>总人数<text class="count">{{ form.headcount }}</text></view>
      <view>报名<text class="count">{{ form.applicantsNum }}</text></view>
      <view>签到<text class="count">{{ form.signInNum }}</text></view>
    </view>
    <view class="list-content">
      <view v-for="(item,index) in list" :key="index" class="item">
        <view class="flex items-middle space-between">
          <view class="name">{{item.userName}}<text class="num">{{ item.phoneNumber }}</text></view>
          <view class="status" :class="item.checkInStatus === 0?'qiandao':''">{{item.entryStatus === 0?'未报名':'已报名'}}</view>
        </view>
        <view class="flex items-middle space-between margin-top">
          <view class="time">{{item.createTime}}</view>
          <view class="status" :class="item.checkInStatus === 0?'':'qiandao'">{{item.checkInStatus === 0?'未签到':'已签到'}}</view>
        </view>
      </view>
    </view>
    <van-divider v-if="list.length && total < total + 1" content-position="center">我也是有底线的</van-divider>
    <van-divider v-if="!list.length" content-position="center">暂无数据</van-divider>
  </view>
</template>

<script>
import {activityPersonnelInfo} from '@/util/api/activity.js'
export default {
  data() {
    return {
      list: [],
      form: {
        headcount: 0,
        applicantsNum: 0,
        signInNum: 0,
      },
      params: {
        pageNo: 1,
        pageSize: 15,
        activityId: ''
      },
    }
  },
  onLoad(e) {
    this.params.activityId = e.id
    this.getList()
  },
  onReachBottom() {
    if (this.list.length >= this.total) return;
    this.params.pageNo += 1;
    this.getList();
  },
  methods: {
    getList() {
      activityPersonnelInfo(this.params).then(res=>{
        this.list = this.list.concat(res.result.page.records)
        this.form = res.result
        this.total = res.result.total
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container{
  .count-box{
    background: #ffffff;
    padding: 20rpx 30rpx;
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    font-size: 28rpx;
    .count{
      margin-left: 20rpx;
      font-weight: bold;
    }
  }
  .list-content{
    padding: 110rpx 30rpx 30rpx 30rpx;
    width: 100%;
    box-sizing: border-box;
    .item{
      background: #ffffff;
      padding: 15rpx;
      box-sizing: border-box;
      border-radius: 10rpx;
      margin-bottom: 20rpx;
      .name{
        font-size: 30rpx;
        color: #333333;
        font-weight: 600;
      }
      .num{
        margin-left: 20rpx;
      }
      .status{
        width: 100rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        color: #ffffff;
        font-size: 24rpx;
        background: #1678ff;
        border-radius: 8rpx;
      }
      .qiandao{
        background: #2dc571;
      }
      .time{
        font-size: 26rpx;
        color: #dddddd;
        margin-top: 20rpx;
      }
    }
  }
}
</style>